import { TextField } from '@mui/material'
import { useCallback, useState } from 'react'
import message from '../../../utils/system/message'
import { MuiColorInput } from 'mui-color-input'

const LineEdit = (props) => {
  const { selectDom, layer } = props

  const [strokeWidth, setStrokeWidth] = useState(selectDom.attrs.strokeWidth)
  const [strokeColor, setStrokeColor] = useState(selectDom.attrs.stroke)

  const changeStrokeWidth = useCallback((e) => {
    const { value } = e.target
    if (isNaN(value)) return
    let realValue = Number(value)
    if (realValue < 2) {
      message.warning({ content: '线宽不能小于2' })
      realValue = 2
    }
    setStrokeWidth(realValue)
    selectDom.attrs.strokeWidth = realValue
    layer.draw()
  }, [selectDom])

  const strokeColorChange = useCallback((color) => {
    setStrokeColor(color)
    selectDom.attrs.stroke = color
    layer.draw()
  }, [selectDom])

  return (
    <div>
      <TextField label="线宽" value={strokeWidth} onChange={changeStrokeWidth} variant="filled"/>
      <div className='mt-16'>
        <MuiColorInput value={strokeColor} onChange={strokeColorChange} label="线条颜色" variant="filled" />
      </div>
    </div>
  )
}

export default LineEdit